/**
 * Lógica do posicionamento 
 * 1. Tamanho máximo da area visível disponível 
 * 2. Se a soma dos tamanhos da quantidade de elementos escondidos for menor que o
 * tamanho máximo da area visível, deslocar apenas o máximo permitido 
 * 3. Se a soma for maior, deslocar normalmente 
 */

$(function() {
	var $step = $('li').outerWidth(true);
	
	$('.left').live('click', function() {
		$('ul').animate({
			left: '-=' + $step + 'px'
		}, function() {
		});
	});
	
	$('.right').live('click', function() {
		$('ul').animate({
			left: '+=' + $step + 'px'
		}, function() {
		});
	});
});

/*
$(function() {
	var items = $(".sbx-list div").length;
	var itemWidth = $(".sbx-list div").outerWidth(true);
	var itemMargin = (itemWidth - $(".sbx-list div").width()) / 2;

	var containerArea = itemWidth * items;
	var visibleArea = $("#scroll").width();
	var visibleItems = Math.floor(visibleArea / itemWidth);
	var maxScroll = (containerArea - (visibleArea / visibleItems) - 10);

	var marginShouldBe = (itemMargin + (visibleArea / visibleItems) - itemWidth);

	var maxStep = visibleArea - marginShouldBe;

	console.log('maxStep: ' + maxStep);

	$(".sbx-list div").css('margin-right', marginShouldBe + 'px');

	console.log('items: ' + items);
	console.log('containerArea: ' + containerArea);
	console.log('visibleArea: ' + visibleArea);
	console.log('maxScroll: ' + maxScroll);
	console.log('visibleItems: ' + visibleItems);
	console.log('marginShouldBe: ' + marginShouldBe);
	console.log('itemMargin: ' + itemMargin);

	if (visibleArea <= maxScroll)
		var step = visibleArea;
	else
		var step = maxScroll - visibleArea;

	console.log('step: ' + step);

	$(".left").live('click', function() {

		$(".sbx-list").animate({
			'margin-left' : '-=' + step + 'px'
		}, function() {
		});
	});

	$(".right").live('click', function() {
		$(".sbx-list").animate({
			'margin-left' : '+=' + step + 'px'
		}, function() {
		});
	});
});
*/